<template>
    <div>
        <div class="box">
            <el-form>
                <el-row :gutter="20">

                    <el-col :span="6">
                        <el-form-item label="名称">
                            <el-input size="large" :placeholder="'名称'" v-model="requestParam.data.name"
                                autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>

                    <!-- 查询 -->
                    <el-col :span="6">
                        <el-form-item>
                            <el-button size="large" type="primary" @click.prevent="getBodyData()">查询</el-button>
                        </el-form-item>
                    </el-col>


                </el-row>

            </el-form>

        </div>

        <div class="box">

            <el-card>
                <template #header>
                    <div class="card-header">
                        <span>仓库管理</span>
                        <el-button style="float: right;" size="mini" type="primary"
                            @click.prevent="toSave('')">新增</el-button>
                        <el-button style="float: right;margin-right: 10px;" size="mini" type="danger"
                            @click.prevent="toRemoveBatch()">删除</el-button>
                    </div>
                </template>
                <el-table ref="table" @selection-change="selectionChange" :reserve-selection="true" v-loading="loading"
                    element-loading-text="Loading..." :data="bodyData.content" style="width: 100%" row-key="id"
                    max-height="500px">

                    <el-table-column type="selection" width="55" />

                    <!-- 序号 -->
                    <el-table-column type="index" label="序号" width="55" />

                    <el-table-column prop="name" label="名称"></el-table-column>
                    
                    <!-- 门店 -->
                    <el-table-column prop="store.name" label="门店" width="120">
                        <template #default="{ row }">
                            <div
                            v-if="row.store"
                            >
                                {{ row.store.name }}
                            </div>
                        </template>
                    </el-table-column>

                    <!-- 负责人 -->
                    <el-table-column prop="empOfManager.name" label="负责人" width="120">
                        <template #default="{ row }">
                            <div
                            v-if="row.empOfManager"
                            >
                                {{ row.empOfManager.name }}
                            </div>
                        </template>
                    </el-table-column>

                    <!-- 备注 -->
                    <el-table-column prop="remark" label="备注" width="120">
                        <template #default="{ row }">
                            <div
                            v-if="row.remark"
                            >
                                {{ row.remark }}
                            </div>
                        </template>
                    </el-table-column>


                    <el-table-column prop="gmtCreate" label="创建时间">
                        <template #default="{ row }">
                            {{ new Date(row.gmtCreate).toLocaleDateString() }}
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="" width="120">
                        <template #default="scope">
                            <el-button link type="primary" size="small" @click.prevent="toEdit(scope.row)">
                                <el-icon>
                                    修改
                                </el-icon>
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div style="position:relative;
                height: 30px;
                ">
                    <el-pagination @current-change="pageChange" style="
                    position:absolute;
                    left:50%;
                    top:10px;
                    transform:translateX(-50%);
                    " layout="prev, pager, next" :page-size="requestParam.pageSize"
                        :current-page="requestParam.pageNumber" :total="bodyData.totalElements" />
                </div>
            </el-card>
        </div>

        <DialogOfSave ref="dialogOfSave" @submit="getBodyData();" />

    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import $kt from '@/vueKantboot';
import DialogOfSave from './components/DialogOfSave.vue';
import { ElMessage, ElMessageBox } from 'element-plus';


let dialogOfSave = ref();

let table = ref();

let toSave = (param: any) => {
    dialogOfSave.value.open(param);
}

let requestParam = ref({
    data: {
        name: "",
    },
    pageNumber: 1,
    pageSize: 30,
});

let isTop = ref(true);

let bodyData = ref({
    content: [
    {
                "empIdOfManager": 477580912308229,
                "empOfManager": {
                    "address": "",
                    "birthday": null,
                    "email": null,
                    "genderCode": null,
                    "gmtCreate": 1698733303916,
                    "gmtModified": 1698735623395,
                    "goodsStore": {
                        "address": "北京家园1号小区",
                        "area": 2.0,
                        "enableStatus": null,
                        "gmtCreate": 1698677071676,
                        "gmtModified": 1698718485343,
                        "gmtOpen": 1698595200000,
                        "id": 477350585077765,
                        "name": "一号店",
                        "phone": "4",
                        "typeCode": "join"
                    },
                    "goodsStoreId": 477350585077765,
                    "id": 477580912308229,
                    "idCard": null,
                    "name": "12",
                    "phone": "额",
                    "userId": 477580901441541,
                    "username": "aaa"
                },
                "gmtCreate": null,
                "gmtModified": null,
                "id": 1,
                "name": "1号仓库",
                "store": {
                    "address": "北京家园1号小区",
                    "area": 2.0,
                    "enableStatus": null,
                    "gmtCreate": 1698677071676,
                    "gmtModified": 1698718485343,
                    "gmtOpen": 1698595200000,
                    "id": 477350585077765,
                    "name": "一号店",
                    "phone": "4",
                    "typeCode": "join"
                },
                "storeId": 477350585077765,
                "remark":"备注",
            }
    ],
    totalElements: 0,
});

let selection = ref([]);

let selectionChange = (val: any) => {
    selection.value = val;
}


let toEdit = (param: any) => {
    dialogOfSave.value.open(param);
}


let pageChange = (val: any) => {
    requestParam.value.pageNumber = val;
    getBodyData();
}

let toAddChildren = (param: any) => {
    dialogOfSave.value.open({
        id: "",
        name: "",
        parentId: param.id,
        fileIdOfImg: "",
    });
}


let loading = ref(true);

let getBodyData = () => {

    loading.value = true;

    $kt.request.request({
        url: '/business-goods-web/admin/goodsWarehouse/getBodyData',
        method: 'post',
        data: requestParam.value,
    }).then((res) => {
        if (res.data.success) {
            bodyData.value = res.data.data;
        }
        loading.value = false;
    });
}

getBodyData();




let removeBatch = () => {



    $kt.request.request({
        url: '/business-goods-web/admin/goodsWarehouse/removeBatch',
        method: 'post',
        data: selection.value,
    }).then((res) => {
        if (res.data.success) {
            ElMessage({
                message: '删除成功',
                type: 'success',
            })
            getBodyData();
            return false;
        }
        ElMessage({
            message: res.data.errMsg,
            type: 'error',
        });
    });

}


let toRemoveBatch = () => {
    if (selection.value.length == 0) {
        ElMessage({
            message: '请选择要删除的数据',
            type: 'error',
        });
        return false;
    }

    // 询问是否删除
    ElMessageBox.confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        // 删除
        removeBatch();
    }).catch(() => {
        // 取消
        ElMessage({
            type: 'info',
            message: '已取消删除'
        });
    });
}

</script>

<style lang="scss" scoped>
.box {
    padding: 20px 20px 0 20px;
}

.box-box {
    background-color: #fff;
    color: #fff;
    text-align: center;
    padding: 30px;
    border-radius: 5px;
}


.box-box:hover {
    // 变小
    transform: scale(0.95);
}

.box-box:active {
    // 变小
    transform: scale(0.9);
}
</style>